<template>
  <view class="container">
    <view class="header">
      <uni-icons type="left" size="23" style="vertical-align: middle" @click="goback"></uni-icons>
      <text style="font-size: 36rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #222222; padding-left: 20rpx">搜索</text>
    </view>
    <!-- 搜索框 -->
    <view class="search">
      <uni-icons type="search" size="30"></uni-icons>
      <input type="text" placeholder="搜索服务名称" v-model="searchwords" @blur="fnsearch" />
      <uni-icons type="clear" size="30" style="margin-left: 170rpx" v-if="searchwords.length != ''" @click="cleanwords"></uni-icons>
    </view>
    <!-- 历史记录模块 -->
    <view v-if="dataList.length == 0">
      <!-- 删除搜索历史 -->
      <view class="delhistory">
        <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #000000">近期搜索记录</view>
        <uni-icons type="trash" size="25" @click="clearhistory"></uni-icons>
      </view>
      <!-- 搜索历史 -->
      <view class="searchhistory">
        <view class="historyitem" v-for="(item, index) in historyList" :key="index" @click="search(item)">{{ item }}</view>
      </view>
    </view>
    <!-- 有数据 -->
    <view v-if="dataList.length != 0">
      <view class="dataitem" @click="godatalist(item)" v-for="item in dataList" :key="item.id">
        <image class="img" :src="item.cover_image" mode=""></image>
        <view class="right">
          <view class="title">{{ item.name }}</view>
          <view class="content">{{ item.dec }}</view>
        </view>
      </view>
    </view>
    <!-- 没有数据 -->
    <view class="nodata" v-if="dataList.length == 0">
      <image src="../../static/images/nodata.png" mode="" style="width: 400rpx; height: 400rpx"></image>
      <view>暂无数据</view>
      <view>请搜索其他关键字</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchwords: '',
      historyList: [], // 搜索历史列表
      dataList: [] // 数据列表
    };
  },
  onLoad() {
    // 获取历史记录
    this.historyList = uni.getStorageSync('history') || [];
    console.log(this.historyList);
  },
  methods: {
    // 点击搜索历史
    search(item) {
      this.searchwords = item;
      this.getsearchlist();
    },
    // 所搜列表
    async getsearchlist() {
      const res = await uni.$http.post('index/search', {
        keyword: this.searchwords
      });
      console.log('-----res----', res.data.data);
      this.dataList = res.data.data;
    },
    // 返回上一页
    goback() {
      uni.navigateBack();
    },
    // 跳转到数据列表页
    godatalist(item) {
      uni.navigateTo({
        url: '/sub_mearthion/datadetail/datadetail?itemdata=' + JSON.stringify(item)
      });
    },
    // 清除搜索内容
    cleanwords() {
      this.searchwords = '';
      this.dataList = [];
    },
    // 清除历史记录
    clearhistory() {
      uni.clearStorage('history');
      this.historyList = uni.getStorageSync('history') || [];
    },
    // 输入框失焦事件
    fnsearch() {
      if (this.historyList.length >= 10) {
        uni.showToast({
          title: '历史记录最多存储10个',
          icon: 'none'
        });
        this.historyList.splice(this.historyList.length - 1, 1);
      }
      if (this.searchwords == '') {
        return uni.showToast({
          title: '搜索的内容不能为空',
          icon: 'none'
        });
      }
      this.historyList.unshift(this.searchwords);
      uni.setStorageSync('history', this.historyList);
      this.getsearchlist();
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  .header {
    margin-top: 60rpx;
    margin-left: 30rpx;
  }
  .search {
    display: flex;
    align-items: center;
    width: 690rpx;
    height: 80rpx;
    background: #ffffff;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    margin: 20rpx 30rpx;
    input {
      margin-left: 20rpx;
    }
  }
  .delhistory {
    box-sizing: border-box;
    margin: 30rpx;
    display: flex;
    justify-content: space-between;
  }
  .searchhistory {
    box-sizing: border-box;
    margin: 30rpx;
    margin-top: 0;
    .historyitem {
      box-sizing: border-box;
      display: inline-block;
      height: 56rpx;
      line-height: 56rpx;
      text-align: center;
      padding: 8rpx 20rpx;
      margin-right: 16rpx;
    }
  }
  .nodata {
    margin: 100rpx 175rpx 0 175rpx;
    text-align: center;
  }
  .dataitem {
    display: flex;
    align-items: center;
    width: 690rpx;
    height: 192rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin: 30rpx 30rpx 0rpx 30rpx;
    .img {
      width: 160rpx;
      height: 160rpx;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
    }
    .right {
      flex: 1;
      margin-left: 30rpx;
      .title {
        font-size: 30rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        color: #333333;
        margin-bottom: 16rpx;
      }
      .content {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; //设置行数
        overflow: hidden;
      }
    }
  }
}
</style>
